<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家居医生</title>
    <style>
        *{margin: 0;padding: 0;}
        .top{
            background-color:turquoise;
            height: 80px;
            text-align: center;
        }
        img{
            margin-top: 13px;
            margin-left: 15px;
        }
        .nav{
            background-color:rgb(248, 242, 242);
            height: 50px;
        }
        .nav-wrap{
            width: 1000px;
            height: 50px;
            margin-left: auto;
            margin-right: auto;
            position: relative;

        }
        .location,.user{
            position: absolute;
            height: 30px;
        }
        .location{
            color:gray;
            font-size: 12px;
            left: 0;
        }
        .user{
            font-size: 13px;
            right: 0;
        }
        .content{
            text-align: center;
        }
        .b{
            color:black;
            line-height: 50px;
            text-decoration: none;
            margin-right: 60px;
            font-size: 18px;
        }
        .search{
            width: 1000px;
            height: 1170px;
            margin-left: auto;
            margin-right: auto;
            background-color:white;
        }
        .wrap{
            font-size: 18px;
            margin-top: 30px;
            margin-bottom: 20px;
        }
        .title{
            width: 1000px;
            height: 183px;
            margin-left: auto;
            margin-right: auto;
            background-color:rgb(248, 242, 242);
        }
        .container div{
            margin-top: 20px;
            width: 238px;
            height: 320px;
            float: left;
            border: 1px solid rgb(204, 198, 198);
            background-color:rgb(248, 242, 242);
        }
        .container div:not(:last-child){
            margin-right: 13.3333px;
        }
        .container1 div{
            margin-top: 20px;
            width: 238px;
            height: 320px;
            float: left;
            border: 1px solid rgb(204, 198, 198);
            background-color:rgb(248, 242, 242);
        }
        .container1 div:not(:last-child){
            margin-right: 13.3333px;
        }
        ul{
            list-style: none;
            overflow:hidden;
            line-height: 25px;
        }
        li{
            float:left;
            margin-top: 13px;
            margin-right: 15px;
        }
        .first{
            color:rgb(16, 187, 187);
            margin-left: 15px;
        }
        .li2{
            border: 2px solid rgb(247, 151, 62);
            background-color:white;
            height: 25px;
            width: 50px;
            text-align: center;
        }
        .sea{
            margin-top: 17px;
            height: 50px;
            background-color:rgb(248, 242, 242);
            font-size: 14px;
        }
        .sear{
            margin-left: 15px;
        }
        .up{
            margin-top: 10px;
            margin-left: -25px;
        }
        button{
            width: 60px;
            height: 36px;
            background: url("images/search.png") no-repeat;
            position:absolute;
            background-position-y: center;
            right: 0;
            top: 0;
            border:none;
        }
        .searcha{
            margin-left: 60px;
            position: relative;
            width: 240px;
            height: 36px;
            border: 1px solid #333;
            border-radius: 15px;
            overflow: hidden;
            margin-top: 6px;
            background-color: white; 
        }
        input{
            position:absolute;
            width: 200px;
            left:12px;
            padding :0;
            height: 36px;
            border: none;
            outline:none;
        }
        .wenhao{
            margin-top: 4px;
            margin-left:110px           
        }
        .searc{
            font-size: 17px;
            color:rgb(16, 187, 187);
        }
        .a{
            font-size: 13px;
            margin-left: 15px;     
        }
        .ab{
            font-size: 19px;
            margin-left: 15px;
            margin-top: 10px;
        }
        .a,.ab{
            color:orange
        }
        .two{
            font-size: 13px;
            margin-left: 15px;
        }
        .big{
            font-size: 19px;
            margin-left: 15px;
            margin-top: 10px;
            color:rgb(98, 190, 226);
        }
        .ye{
            margin-top: 700px;
            height: 40px;
        }
        .shang{
            height: 30px;
            width: 100px;
            background-color:rgb(228, 225, 225);
            text-align: center;
            margin-right: 60px;
        }
        .num{
            color:orange;
        }
        .xia{
            height: 30px;
            width: 100px;
            background-color:rgb(228, 225, 225);
            text-align: center;
            margin-left: 50px;
        }
        .word{
            margin-left: 50px;
        }
        .box{
            height: 28px;
            width: 28px;
            border: 2px solid#333;
        }
        .sure{
            height: 30px;
            width: 70px;
            background-color:orange;
            text-align: center;
            margin-left: 50px;
        }
        .code{
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 22px;
            color:rgb(16, 187, 187);
        }
        .bottom{
            position: relative;
            height: 205px;
            background-color:rgb(83, 81, 81);
        }
        .bo{
            position: relative;
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
            color:aliceblue;
            font-size: 10px;
        }
        .c{
            font-size: 16px;
            margin-top: 10px;
        }
        .d{
            margin-top: 10px;
        }
        .tu{
            position: absolute;
            float: left;
            top: 10px;
            right: 0px;
        }
        .s{
            margin-top: 1px;
        }
        .line{
            height: 1px;
            background-color:white;
            margin-top: 30px;
        }
        .bot{
            margin-top: 20px;
        }
        .boto{
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .loa,.adm{
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <div class="top">
        <img src="images/logo.png"  alt="">
    </div>
    <div class="nav">
        <div class="nav-wrap">
            <div class="location">
                <ul>
                    <li><img class="loa" src="images/location.png" alt=""></li>
                    <li>深圳</li>
                    <li><切换></li>
                </ul>
            </div>
            <div class="user">
                <ul>
                    <li class="adm"><img src="images/adm.png"  alt=""></li>
                    <li>个人中心</li>
                </ul>
            </div>
            <div class="content">
                <a class="b" href="#">首页</a>
                <a class="b" href="#">资讯</a>
                <a class="b" href="#">测评</a>
                <a class="b" href="#">商城</a>
            </div>
        </div>
    </div>
    <div class="search">
        <p class="wrap"> 首页〉预防装修污染〉材料库 </p>
        <div class="title">
            <ul>
                <li class="first">类别<li>
                <li>全部<li>
                <li class="li2">地板<li>
                <li>涂料<li>
                <li>墙纸<li>
                <li>瓷砖<li>
                <li>粘胶剂<li>
                <li>油漆<li>
                <li>家具<li>
                <li>板材<li>
                <li>饰品<li>
                <img src="images/indexSelect.png" alt="">
            </ul>
            <ul>
                <li class="first">类型<li>
                <li>全部<li>
            </ul>
             <ul>
                 <li class="first">材质<li>
                 <li>全部<li>
                 <li class="li2">实木<li>
                 <li>复合<li>
                 <li>强化<li>
                 <li>其他<li>
             </ul> 
             <ul>
                 <li class="first">品牌<li>
                 <li>全部<li>
                 <li class="li2">圣象<li>
                 <li>大自然<li>
                 <li>生活家<li>
                 <li>北美风情<li>
                 <li>德尔<li>
                 <li>博典<li>
                 <li>船王<li>
             </ul>  
        </div>
        <div class="sea">
            <ul>
                <li class="sear">发布时间</li>
                <li class="up"><img src="images/downicon.png" alt=""></li>
                <li >价格</li>
                <li class="up"><img src="images/upicon.png" alt=""></li>
                <li>环保节能</li>
                <li class="up"><img src="images/upicon.png" alt=""></li>
                <li class="searcha">
                    <input type="text"placeholder="搜索">
                    <button class="buttona">搜索</button>
                </li>
                <li class="wenhao"><img src="images/wenhao.png" alt=""></li>
                <li class="searc"><p>了解家居医生建材环保评级标准</p><li>
            </ul>
        </div>
        <div class="container">
            <div>
                <img src="images/data_image.png"  alt="">
                <p class="a">德尔 都市系列3001</p>
                <p class="a">木地板-复合地板</p>
                <p class="a">单价：128/m</p>
                <p class="ab">环保评级：B(可以使用)</p>
            </div>
            <div>
                <img src="images/data_image.png"  alt="">
                <p class="two">德尔 都市系列3001</p>
                <p class="two">木地板-复合地板</p>
                <p class="two">单价：128/m</p>
                <p class="big">环保评级：B(可以使用)</p>
            </div>      
            <diV>
                <img src="images/data_image.png"  alt="">
                <p class="two">德尔 都市系列3001</p>
                <p class="two">木地板-复合地板</p>
                <p class="two">单价：128/m</p>
                <p class="big">环保评级：B(可以使用)</p>
            </diV>
            <diV>
                <img src="images/data_image.png"  alt="">
                <p class="two">德尔 都市系列3001</p>
                <p class="two">木地板-复合地板</p>
                <p class="two">单价：128/m</p>
                <p class="big">环保评级：B(可以使用)</p>
            </diV>   
        </div>
        <div class="container1">
            <div>
                <img src="images/data_image.png"  alt="">
                <p class="two">德尔 都市系列3001</p>
                <p class="two">木地板-复合地板</p>
                <p class="two">单价：128/m</p>
                <p class="big">环保评级：B(可以使用)</p>
            </div>
            <div>
                <img src="images/data_image.png"  alt="">
                <p class="two">德尔 都市系列3001</p>
                <p class="two">木地板-复合地板</p>
                <p class="two">单价：128/m</p>
                <p class="big">环保评级：B(可以使用)</p>
            </div>      
            <diV>
                <img src="images/data_image.png"  alt="">
                <p class="two">德尔 都市系列3001</p>
                <p class="two">木地板-复合地板</p>
                <p class="two">单价：128/m</p>
                <p class="big">环保评级：B(可以使用)</p>
            </diV>
            <diV>
                <img src="images/data_image.png"  alt="">
                <p class="two">德尔 都市系列3001</p>
                <p class="two">木地板-复合地板</p>
                <p class="two">单价：128/m</p>
                <p class="big">环保评级：B(可以使用)</p>
            </diV>   
        </div>
        <div class="ye">
            <ul>
                <li class="shang">上一页</li>
                <li >1</li>
                <li class="num">2</li>
                <li >3</li>
                <li >4</li>
                <li >5</li>
                <li class="xia">下一页</li>
                <li class="word">共有十页，去第</li>
                <li class="box"></li>
                <li>页</li>
                <li class="sure">确定</li>
            </ul>
        </div>
        <div>
            <ul>
                <li><img src="images/small_weixin.png" alt=""></li>
                <p class="code">建材检测 需求反馈</p>
                <p class="ma2">亲爱的用户，我们正在不断地完善和更新建材库，</p>
                <p class="ma3">若没有找到恁想要的材料信息，请将恁想测的建材告诉我们。</p>
            </ul>
        </div>
    </div>
    <div class="bottom">
        <div class="bo">
            <img src="images/footerLogo.png" alt="">
            <p class="c">为室内环境健康把好每一关</p>
            <p class="d">家居医生致力于中国人的家居健康问题，通过专业的技术研究</p>
            <p>和测评，倾力协助大众打造绿色、环保的人居生活环境。</p>
            <div class="tu">
                <ul>
                    <li>关于我们</li>
                    <li>版权说明</li>
                    <li class="s"><img src="images/weixin2.png" alt=""></li>
                    <li>关于微信</li>
                </ul>
                <ul>
                    <li>联系我们</li>
                    <li>用户隐私</li>
                    <li class="s"><img src="images/tianmao.png" alt=""></li>
                    <li>天猫旗舰店</li>
                </ul>
                <ul>
                    <li>加入我们</li>
                    <li>免责申明</li>
                    <li class="s"><img src="images/shop.png" alt=""></li>
                    <li>有赞商城</li>
                </ul>
            </div>
            <div class="line"></div>
            <p class="bot">深圳建筑科学研究院股份有限公司  家居医生网</p>
            <p class="boto">粤ICP备08011321号 @Copyright All Rights Reserved</p>
        </div>
    </div>
</body>
</html>